TypeScript Geavanceerde Types: Template Literal en Conditional Types Onder de Knie Krijgen

Internationaal Voorbeeld: Verschillende Datumformaten Afhandelen

Verschillende regio's van de wereld gebruiken verschillende datumformaten. U kunt conditional types gebruiken om deze variaties af te handelen.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementatie zou verschillende datumformaten afhandelen)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Ongeldig datumformaat");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Toegang tot het jaar wetende dat het er zal zijn

Dit voorbeeld gebruikt conditional types om verschillende datum parsing functies te definiëren op basis van het opgegeven datumformaat. Het ParseDate type zorgt ervoor dat het geretourneerde object de juiste eigenschappen heeft op basis van het formaat.

Template Literal en Conditional Types Combineren

De echte kracht komt wanneer u template literal types en conditional types combineert. Dit maakt ongelooflijk krachtige type manipulaties mogelijk.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Vereenvoudigd ter demonstratie
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Voorbeeldfunctie die een type accepteert
function processEvent(event: T): ExtractEventPayload {
    //In een echte implementatie zouden we het event daadwerkelijk verzenden.
    console.log(`Processing event ${event}`);

    //In een echte implementatie zou de payload gebaseerd zijn op het event type.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Merk op dat de return types zeer specifiek zijn:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Als u andere strings gebruikt, krijgt u never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

Best Practices en Overwegingen

• Houd het Simpel: Hoewel krachtig, kunnen deze geavanceerde types snel complex worden. Streef naar duidelijkheid en onderhoudbaarheid.
• Test Grondig: Zorg ervoor dat uw type definities zich gedragen zoals verwacht door uitgebreide unit tests te schrijven.
• Documenteer Uw Code: Documenteer duidelijk het doel en het gedrag van uw geavanceerde types om de leesbaarheid van de code te verbeteren.
• Overweeg Prestaties: Overmatig gebruik van geavanceerde types kan de compilatietijd beïnvloeden. Profileer uw code en optimaliseer waar nodig.